<template>
  <div class="blog-list" @scroll="onScroll">
    <el-card
      v-for="blog in blogs"
      :key="blog.id"
      class="blog-card"
      shadow="hover"
      v-if="blogs.length > 0"
    >
      <div class="blog-content">
        <el-image
          :src="blog.img || '/imgs/icons/default-icon.png'"
          class="blog-image"
          fit="cover"
          @error="handleImageError"
        ></el-image>
        <div class="blog-details">
          <h3>{{ blog.title || '无标题' }}</h3>
          <p class="blog-description">{{ blog.description || '暂无描述' }}</p>
          <div class="blog-meta">
            <span>点赞数: {{ blog.liked || 0 }}</span>
            <el-button
              type="primary"
              size="small"
              :icon="blog.isLike ? 'el-icon-star-on' : 'el-icon-star-off'"
              @click="addLike(blog)"
              :disabled="blog.isLike"
            >
              {{ blog.isLike ? '已点赞' : '点赞' }}
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <div v-else class="no-data">
      <el-empty description="暂无博客数据"></el-empty>
    </div>
    <div v-if="isReachBottom" class="loading">
      <el-button type="text" @click="load">加载更多</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogList',
  props: {
    blogs: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: 1,
    },
    isReachBottom: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onScroll(e) {
      this.$emit('scroll', e);
    },
    addLike(blog) {
      this.$emit('add-like', blog);
    },
    load() {
      this.$emit('load');
    },
    handleImageError(event) {
      event.target.src = '/imgs/icons/default-icon.png';
    },
  },
};
</script>

<style scoped>
.blog-list {
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.blog-card {
  margin-bottom: 20px;
}
.blog-content {
  display: flex;
  align-items: center;
}
.blog-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 20px;
}
.blog-details {
  flex: 1;
}
.blog-details h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
.blog-description {
  font-size: 14px;
  color: #606266;
  margin: 10px 0;
}
.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loading {
  text-align: center;
  padding: 10px;
}
.no-data {
  text-align: center;
  padding: 20px;
}
</style>
